<template>
  <div id="map" style="height: 100%; width: 100%"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import L from 'leaflet'
import 'leaflet/dist/leaflet.css'

onMounted(() => {
  // 初始化地图
  const map = L.map('map').setView([24.7319, 112.2900], 15)

  // 加载 Esri 世界影像图层（高清卫星图）
  L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {}).addTo(map)

  // 定义一个标记点坐标
  const markerLatLng = [24.735, 112.292]
  const humidity = 10 //假设数据
  // 绘制一个圆点标记
  L.circleMarker(markerLatLng, {
    radius: 8,
    color: '#007BFF',       
    fillColor: '#007BFF',   
    fillOpacity: 0.8
  })
  .addTo(map)
  .bindPopup(`🌾 湿度：${humidity}`)
  .openPopup()
})
</script>

<style scoped>
#map {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  height: 100%; 
  width: 100%;  
}
</style>
